<script lang="ts" setup>
import { RefundStatus, OrderStatus } from '@/constants/orders';
import { useLocale } from '@/locale/locale';
import { RouteMap, useRouter } from '@/router';
import { toPrice } from '@/utils/price';
import { format } from 'date-fns';
import { computed, onMounted, ref, watch } from 'vue';

const { t } = useLocale();
const router = useRouter();

const props = defineProps<{
  index: number;
  orderSn: string;
  status: any;
  name: string;
  address: string;
  countdown: number;
  actualAmount: number;
  orderAmount: number;
  bookingDate: string;
  bookingTime: string;
  bookingCount: number;
}>();

const displayDescription = computed(() => {
  return `${format(new Date(props.bookingDate), 'MM.dd')} ${props.bookingTime} · ${t(
    'LHTKey_hotelPerson',
    { person: props.bookingCount }
  )}`;
});

defineEmits(['cancel']);
</script>

<template>
  <view class="p-4 bg-white rounded-lg">
    <view @click="router.to(RouteMap.restaurantBookingDetails, { orderSn })">
      <view class="flex justify-between items-center mb-2">
        <text class="text-sm text-primary font-medium">{{ t(`OrderListRestaurant`) }}</text>
        <view class="flex justify-end items-center flex-1">
          <apt-count-down
            v-if="status === OrderStatus.WAIT_PAY"
            :countdown="countdown"
            @end="$emit('cancel', orderSn)"
          />
          <text v-else-if="status === OrderStatus.HAVE_PAID" class="text-sm text-primary">
            {{ t('LOKey_orderReservationSuccess') }}
          </text>
          <text v-else-if="status === OrderStatus.WAIT_CONFIRM" class="text-sm text-fourth">
            {{ t('OrderListWaitConfim') }}
          </text>
          <text v-else-if="status === OrderStatus.CONFIRM_DISAGREE" class="text-sm text-fourth">
            {{ t('DiningPreOrderBookFailed') }}
          </text>
          <text v-else-if="status === OrderStatus.CONFIRMED" class="text-sm text-fourth">
            {{ t('OrderListConfirmed') }}
          </text>
          <text v-else-if="status === OrderStatus.OVERDUE" class="text-sm text-fourth">
            {{ t('OrderListOverdue') }}
          </text>
          <text v-else-if="status === OrderStatus.COMPLETE" class="text-sm text-fourth">
            {{ t('OrderListComplete') }}
          </text>
          <text v-else class="text-sm text-fourth">{{ t('LOKey_orderCancel') }}</text>
        </view>
      </view>
      <view class="text-lg text-primary font-medium mb-1">{{ name }}</view>
      <view class="text-sm text-fourth mb-1">
        {{ address }}
      </view>
      <view class="text-sm text-fourth mb-1">
        {{ displayDescription }}
      </view>
      <view class="flex justify-end items-baseline mt-2_5">
        <template v-if="status === OrderStatus.WAIT_PAY">
          <text class="text-sm text-primary">{{ t('LOKey_shouldPay') }}</text>
          <text class="text-lg text-primary font-medium">
            {{ t('LPKey_moneyX', { money: toPrice(actualAmount) }) }}
          </text>
        </template>
        <template v-else>
          <text class="text-sm text-primary">{{ t('LOKey_orderAmount') }}</text>
          <text class="text-lg text-primary font-medium">
            {{ t('LPKey_moneyX', { money: toPrice(orderAmount) }) }}
          </text>
        </template>
      </view>
    </view>
    <view v-if="status === OrderStatus.WAIT_PAY" class="mt-2_5 flex justify-end items-center">
      <uv-button
        :text="t('LOKey_cancelReservation')"
        size="small"
        @click.stop="$emit('cancel', orderSn)"
      />
      <uv-button
        :text="t('LRKey_payNow')"
        custom-style="margin-left: 20rpx; background: #269C74"
        size="small"
        type="primary"
        @click.stop="
          router.to(RouteMap.payment, {
            id: orderSn,
            countdown: Math.abs(countdown),
            amount: actualAmount,
            createTime: format(new Date(), 'yyyy-MM-dd'),
            from: 'dining',
            isFromOrder: true,
            orderIndex: index
          })
        "
      />
    </view>
    <view v-else-if="status === OrderStatus.HAVE_PAID" class="mt-2_5 flex justify-end items-center">
      <uv-button
        v-if="status !== RefundStatus.DONE"
        :text="t('LOKey_cancelRequestAction')"
        size="small"
        @click.stop="
          router.to(RouteMap.orderRefundDetails, {
            orderSn,
            status
          })
        "
      />
      <uv-button
        :text="t('LKey_onlineService')"
        custom-style="margin-left: 20rpx"
        size="small"
        @click.stop="router.to(RouteMap.cs)"
      />
    </view>
  </view>
</template>
